import { useIntersectionObserver } from '@vueuse/core'
import { ref } from 'vue'

// 观察的目标不一样
// 到达可视区后调用函数不一样
// 把不一样的通过传参传递过来就好啦
export function useLazyData(apiFn: () => void) {
  const target = ref(null)
  // #2 观察 target 是否进入可视区
  const { stop } = useIntersectionObserver(target, ([{ isIntersecting }]) => {
    // 如果观测的目标 target 到达了可视区 isIntersecting 就是 true
    if (isIntersecting) {
      // #3 采取调用我的接口，拿数据
      apiFn()
      stop()
    }
  })
  return target
}
